<template>
	<view>
		<view class="boxContrainer">
			<view class="titlBox" @click="clickOpen(1)">
				<text class="title">订单信息</text>
				<image
					style="width: 30rpx; height: 30rpx"
					:src="`/static/other/arrow_${isOpen1 ? 'down' : 'up'}.png`"
					mode="aspectFill"></image>
			</view>
			<view class="contentBox" v-if="isOpen1">
				<view class="textItem">
					<text>订单编号</text>
					<text style="color: #333">{{ orderDetail.orderInfo.orderNo | filterNull }}</text>
				</view>
				<view class="textItem">
					<text>订单状态</text>
					<text style="color: #333">{{
						orderDetail.orderInfo.orderStatus | shortOrderStatus
					}}</text>
				</view>
				<view class="textItem">
					<text>取车类型</text>
					<text style="color: #333">{{ orderDetail.orderInfo.rentalType | rentalType }}</text>
				</view>
				<view class="textItem">
					<text>订单来源</text>
					<text style="color: #333">{{ orderDetail.orderInfo.orderSource | orderSource }}</text>
				</view>
				<view class="textItem" v-if="orderDetail.orderInfo.orderSource >= 4">
					<text>网络订单号</text>
					<text style="color: #333">{{ orderDetail.orderInfo.networkOrderNo | filterNull }}</text>
				</view>
				<view class="textItem">
					<text>订单标签</text>
					<text style="color: #333">{{ formatLabel(orderDetail.orderInfo.labels) || "--" }}</text>
				</view>

				<block>
					<view class="textItem">
						<text>预约取车时间</text>
						<text style="color: #333">{{
							orderDetail.orderInfo.rentalStartTime | filterNull
						}}</text>
					</view>
					<view class="textItem">
						<text>预约还车时间</text>
						<text style="color: #333">{{ orderDetail.orderInfo.rentalEndTime | filterNull }}</text>
					</view>

					<view
						class="textItem"
						v-if="orderDetail.orderInfo.takeAddress"
						@click.stop="goNaviRoute(1)">
						<text>预约取车地址</text>
						<view class="flex-row-center">
							<text style="color: #2879ff; margin-right: 16rpx"
								>{{ orderDetail.orderInfo.takeAddress | filterNull }}
							</text>
							<image
								style="width: 34rpx; height: 34rpx"
								src="/static/other/map_navi.png"
								mode="aspectFill"></image>
						</view>
					</view>

					<view class="textItem">
						<text>预约取车门店</text>
						<text style="color: #333">{{
							orderDetail.orderInfo.reserveTakeStoreName | filterNull
						}}</text>
					</view>
					<view class="textItem">
						<text>预约还车门店</text>
						<text style="color: #333">{{
							orderDetail.orderInfo.reserveAlsoStoreName | filterNull
						}}</text>
					</view>
					<view class="textItem">
						<text style="width: 200rpx">预定车型</text>
						<text style="color: #333">{{ orderDetail.orderInfo.modelName | filterNull }}</text>
					</view>
				</block>

				<block
					v-if="
						orderDetail.orderInfo &&
						orderDetail.orderInfo.orderStatus >= 4 &&
						orderDetail.orderInfo.orderStatus != 10
					">
					<view class="textItem">
						<text>实际取车时间</text>
						<text style="color: #333">{{
							orderDetail.orderInfo.actualStartTime | filterNull
						}}</text>
					</view>
					<view class="textItem">
						<text>实际还车时间</text>
						<text style="color: #333">{{ orderDetail.orderInfo.actualEndTime | filterNull }}</text>
					</view>
					<view
						class="textItem"
						v-if="orderDetail.orderInfo.alsoAddress"
						@click.stop="goNaviRoute(2)">
						<text>预约还车地址</text>
						<view class="flex-row-center">
							<text style="color: #2879ff; margin-right: 16rpx"
								>{{ orderDetail.orderInfo.alsoAddress | filterNull }}
							</text>
							<image
								style="width: 34rpx; height: 34rpx"
								src="/static/other/map_navi.png"
								mode="aspectFill"></image>
						</view>
					</view>

					<view class="textItem">
						<text>实际取车门店</text>
						<text style="color: #333">{{ orderDetail.orderInfo.takeStoreName | filterNull }}</text>
					</view>
					<view class="textItem">
						<text>实际还车门店</text>
						<text style="color: #333">{{ orderDetail.orderInfo.alsoStoreName | filterNull }}</text>
					</view>
					<view class="textItem">
						<text style="width: 200rpx">实际车型</text>
						<text style="color: #333">{{
							orderDetail.orderInfo.actualModelName | filterNull
						}}</text>
					</view>
				</block>

				<view class="textItem">
					<text style="width: 200rpx">负责人</text>
					<text style="color: #333">{{ orderDetail.orderInfo.headName | filterNull }}</text>
				</view>
				<view class="textItem">
					<text style="width: 200rpx">收车员</text>
					<text style="color: #333">{{
						orderDetail.orderInfo.vehicleCollectorName | filterNull
					}}</text>
				</view>
				<view class="textItem">
					<text style="width: 200rpx">发车员</text>
					<text style="color: #333">{{ orderDetail.orderInfo.salesman | filterNull }}</text>
				</view>

				<template v-if="charterService == 1">
					<view class="textItem">
						<text style="width: 200rpx">是否需要代驾</text>
						<text style="color: #333">{{
							orderDetail.orderInfo.isSubstituteDriving == 1 ? "是" : "否"
						}}</text>
					</view>
					<view class="textItem" v-if="orderDetail.orderInfo.isSubstituteDriving == 1">
						<text style="width: 200rpx">司机名称</text>
						<text style="color: #333">{{
							orderDetail.orderInfo.substituteDrivingName | filterNull
						}}</text>
					</view>
				</template>

				<template
					v-if="
						orderDetail.carInfo &&
						orderDetail.carInfo.carSource != null &&
						orderDetail.carInfo.carSource == 6
					">
					<view class="textItem">
						<text style="width: 200rpx">托管单价</text>
						<text
							v-if="
								orderDetail.carInfo.escrowUnitPrice == null ||
								orderDetail.carInfo.escrowUnitPrice == 0
							"
							style="color: #333"
							>--</text
						>
						<text v-else>{{ orderDetail.carInfo.escrowUnitPrice | filterNull }}元/天</text>
					</view>
					<view class="textItem">
						<text style="width: 200rpx">用车天数</text>
						<text v-if="orderDetail.orderInfo.orderStatus <= 4" style="color: #333">--</text>
						<text v-else>{{ orderDetail.carInfo.escrowOrderDays | filterNull }}天</text>
					</view>
					<view class="textItem">
						<text style="width: 200rpx">托管费用</text>
						<text v-if="orderDetail.orderInfo.orderStatus <= 4" style="color: #333">--</text>
						<text v-else>{{ orderDetail.carInfo.escrowAmount | filterNull }}元</text>
					</view>
					<view class="textItem">
						<text style="width: 200rpx">托管费用结算</text>
						<text v-if="orderDetail.orderInfo.orderStatus <= 4" style="color: #333">--</text>
						<text v-else>{{
							orderDetail.carInfo.settlementStatus == 2 ? "已结算" : "待结算"
						}}</text>
					</view>
				</template>

				<view class="textItem">
					<text style="width: 200rpx">订单说明</text>
					<text style="color: #2879ff" @click="showOrderRemark">提交订单说明</text>
				</view>

				<template v-if="orderDetail.orderRemarkList && orderDetail.orderRemarkList.length > 0">
					<view class="remarkBox" v-for="(item, index) in orderDetail.orderRemarkList" :key="index">
						<view class="remark">{{ item.remarkContent }}</view>
						<view class="other flex-row-end">
							<text>{{ item.operatorName }}</text>
							<text style="margin-left: 20rpx">{{ item.createTime }}</text>
						</view>
					</view>
				</template>
			</view>
		</view>

		<view class="boxContrainer">
			<view class="titlBox" @click="clickOpen(2)">
				<text class="title">车辆信息</text>
				<image
					style="width: 30rpx; height: 30rpx"
					:src="`/static/other/arrow_${isOpen2 ? 'down' : 'up'}.png`"
					mode="aspectFill"></image>
			</view>
			<view class="contentBox" v-if="isOpen2">
				<view class="textItem">
					<text style="width: 200rpx">分配车辆</text>
					<text style="color: #333">{{ orderDetail.orderInfo.actualModelName | filterNull }}</text>
				</view>
				<view class="textItem">
					<text>车牌号</text>
					<text style="color: #333">{{ orderDetail.carInfo.carNo | filterNull }}</text>
				</view>

				<view class="textItem" v-if="orderDetail.carInfo.sameJobName">
					<text>所属同行</text>
					<text style="color: #333">{{ orderDetail.carInfo.sameJobName | filterNull }}</text>
				</view>
				<view class="textItem" v-if="orderDetail.carInfo.phone">
					<text>同行联系电话</text>
					<text style="color: #333">{{ orderDetail.carInfo.phone | filterNull }}</text>
				</view>
			</view>
		</view>

		<view class="boxContrainer">
			<view class="titlBox">
				<text class="title">客户信息</text>
				<text
					v-if="electronicContractEnable == 1"
					style="color: #2879ff; font-size: 28rpx"
					@click="sendAuthentication">
					电子合同认证
				</text>
			</view>
			<view class="contentBox" v-if="isOpen3">
				<view class="textItem">
					<text>客户姓名</text>
					<text style="color: #333">{{ orderDetail.customerInfo.memberName }}</text>
				</view>
				<view class="textItem">
					<text>联系电话</text>
					<view class="flex-row-center" @click.stop="callPhone">
						<text style="color: #333; margin-right: 16rpx"
							>{{ orderDetail.customerInfo.contactPhone }}
						</text>
						<image
							style="width: 34rpx; height: 34rpx"
							src="https://qykh.shopec.com.cn/image-server/dz/callPhone.png"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="boxContrainer" v-if="orderDetail.carInspection">
			<view class="titlBox" @click="clickOpen(4)">
				<text class="title">交车验车单</text>
				<image
					style="width: 30rpx; height: 30rpx"
					:src="`/static/other/arrow_${isOpen4 ? 'down' : 'up'}.png`"
					mode="aspectFill"></image>
			</view>
			<view class="contentBox" v-if="isOpen4">
				<view class="textItem">
					<text>车辆油量</text>
					<text style="color: #333" v-if="orderDetail.control == 0"
						>{{ orderDetail.carInspection.fuelCapacity | filterNull }}/16</text
					>
					<text style="color: #333" v-else
						>{{ orderDetail.carInspection.fuelCapacity | filterNull }}
						<text v-if="fuelType == 1">%</text>
						<text v-if="fuelType == 0">升</text>
					</text>
				</view>
				<view class="textItem">
					<text>公里数</text>
					<text style="color: #333"
						>{{ orderDetail.carInspection.vehicleMileage | filterNull }}km</text
					>
				</view>
				<view class="textItem">
					<text>验车时间</text>
					<text style="color: #333">{{ orderDetail.carInspection.takeAlsoTime | filterNull }}</text>
				</view>
				<view class="textItem">
					<text>车辆随身物品</text>
					<text style="color: #333">{{
						orderDetail.carInspection.accessoryItems | filterNull
					}}</text>
				</view>
				<view class="textItem">
					<text>交车验车照片</text>
					<view class="flex-row-center" @click.stop="seeCheckCarPhoto(1)">
						<text style="color: #2879ff; margin-right: 10rpx">查看</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="textItem">
					<text>客户签名</text>
					<view style="border: 1rpx solid #cdcdcd" v-if="url1">
						<u-album :urls="[url1]" multipleSize="100" singleSize="100"> </u-album>
					</view>
				</view>
				<view class="textItem">
					<text>其他描述</text>
					<text style="color: #333">{{ orderDetail.carInspection.remark | filterNull }}</text>
				</view>
			</view>
		</view>

		<view class="boxContrainer" v-if="orderDetail.alsoCarCheck">
			<view class="titlBox" @click="clickOpen(5)">
				<text class="title">还车验车单</text>
				<image
					style="width: 30rpx; height: 30rpx"
					:src="`/static/other/arrow_${isOpen5 ? 'down' : 'up'}.png`"
					mode="aspectFill"></image>
			</view>
			<view class="contentBox" v-if="isOpen5">
				<view class="textItem">
					<text>车辆油量</text>
					<text style="color: #333" v-if="orderDetail.control == 0"
						>{{ orderDetail.alsoCarCheck.fuelCapacity | filterNull }}/16</text
					>
					<text style="color: #333" v-else
						>{{ orderDetail.alsoCarCheck.fuelCapacity | filterNull }}
						<text v-if="fuelType == 1">%</text>
						<text v-if="fuelType == 0">升</text>
					</text>
				</view>
				<view class="textItem">
					<text>公里数</text>
					<text style="color: #333"
						>{{ orderDetail.alsoCarCheck.vehicleMileage | filterNull }}km</text
					>
				</view>
				<view class="textItem">
					<text>验车时间</text>
					<text style="color: #333">{{ orderDetail.alsoCarCheck.takeAlsoTime | filterNull }}</text>
				</view>
				<view class="textItem">
					<text>车辆随身物品</text>
					<text style="color: #333">{{
						orderDetail.alsoCarCheck.accessoryItems | filterNull
					}}</text>
				</view>
				<view class="textItem">
					<text>还车验车照片</text>
					<view class="flex-row-center" @click.stop="seeCheckCarPhoto(2)">
						<text style="color: #2879ff; margin-right: 10rpx">查看</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="textItem">
					<text>客户签名</text>
					<view style="border: 1rpx solid #cdcdcd" v-if="url2">
						<u-album :urls="[url2]" multipleSize="100" singleSize="100"> </u-album>
					</view>
				</view>
				<view class="textItem">
					<text>其他描述</text>
					<text style="color: #333">{{ orderDetail.alsoCarCheck.remark | filterNull }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import settings from "@/settings.js";
	import { getAllLabel } from "@/api/home-api.js";
	import * as contractApi from "@/api/order-api.js";
	import { bd09ToGcj02 } from "@/utils/utils.js";

	export default {
		name: "",
		data() {
			return {
				isOpen1: true,
				isOpen2: false,
				isOpen3: true,
				isOpen4: false,
				isOpen5: false,
				labelList: [],
				remarkList: [],
				remark: "",
				fuelType: null,
			};
		},
		computed: {
			charterService() {
				let charterService = this.$store.state.initData.initData.charterService || 2;
				return charterService;
			},
			url1() {
				return settings.baseImageUrl + this.orderDetail?.carInspection?.signImage;
			},
			url2() {
				return settings.baseImageUrl + this.orderDetail?.alsoCarCheck?.signImage;
			},
			electronicContractEnable() {
				return this.$store.state.initData.initData.electronicContractEnable;
			},
		},

		props: {
			orderDetail: {
				type: Object,
				default: () => ({
					control: 0,
					orderInfo: {},
					carInfo: {
						carSource: -1,
					},
					customerInfo: {
						memberName: "",
					},
					carInspection: {},
					alsoCarCheck: {},
					orderRemarkList: [],
				}),
			},
		},
		mounted() {
			getAllLabel().then((res) => {
				this.labelList = res.data || [];
			});
			if (this.orderDetail.control == 1) {
				console.log(11111111);
				this.carOilQuantity();
			}
		},
		methods: {
			carOilQuantity() {
				contractApi.car_oil(this.orderDetail.carInfo.carId).then((res) => {
					if (res.data) {
						this.$nextTick(() => {
							console.log(res.data.fuelType);

							this.fuelType = res.data.fuelType;
						});
					}
				});
			},

			//客户发起认证
			sendAuthentication(row) {
				uni.showModal({
					title: "提示",
					content: "确定发起认证吗?",
					cancelText: "取消",
					confirmText: "确定",
					success: (modalRes) => {
						if (modalRes.confirm) {
							//确定
							contractApi
								.memberCertification(this.orderDetail.customerInfo.memberNo)
								.then((res) => {
									uni.$u.toast("发起认证成功");
									this.getOrderDetail();
								});
						}
					},
				});
			},
			showOrderRemark() {
				this.$emit("showOrderRemark");
			},
			formatLabel(labels) {
				return this.labelList
					.filter((item) => {
						return labels?.split(",").indexOf(item.id + "") >= 0;
					})
					.map((i) => {
						return i.name;
					})
					.join(",");
			},

			clickOpen(type) {
				switch (type) {
					case 1:
						this.isOpen1 = !this.isOpen1;
						break;
					case 2:
						this.isOpen2 = !this.isOpen2;
						break;
					case 3:
						this.isOpen3 = !this.isOpen3;
						break;
					case 4:
						this.isOpen4 = !this.isOpen4;
						break;
					case 5:
						this.isOpen5 = !this.isOpen5;
						break;
					default:
						break;
				}
			},
			// 导航
			goNaviRoute(type) {
				const orderInfo = this.orderDetail.orderInfo;
				var lat;
				var lng;
				var name;
				let result = [];
				if (orderInfo.orderSource == 2) {
					//如果是后台下单->百度转腾讯
					if (type == 1) {
						result = bd09ToGcj02(orderInfo.takeLat, orderInfo.takeLon);
						name = orderInfo.takeAddress;
					} else {
						result = bd09ToGcj02(orderInfo.alsoLat, orderInfo.alsoLon);
						name = orderInfo.alsoAddress;
					}
				} else {
					//取原始的
					result = [orderInfo.takeLat, orderInfo.takeLon];
					name = orderInfo.takeAddress;
				}

				if (result.length == 2) {
					uni.openLocation({
						//​使用微信内置地图查看位置。
						latitude: result[0], //要去的纬度-地址
						longitude: result[1], //要去的经度-地址
						name: name,
						success() {
							console.log("成功了");
						},
						fail(msg) {
							console.log(msg);
						},
					});
				}
			},
			// 拨打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.orderDetail.customerInfo.contactPhone,
				});
			},
			// 点击查看验车照片 type =1交车照片 2还车照片
			seeCheckCarPhoto(type) {
				var params = {
					type: type,
					bodyImage:
						type == 1
							? this.orderDetail.carInspection.bodyImage
							: this.orderDetail.alsoCarCheck.bodyImage,
					panelImage:
						type == 1
							? this.orderDetail.carInspection.panelImage
							: this.orderDetail.alsoCarCheck.panelImage,
					interiorImage:
						type == 1
							? this.orderDetail.carInspection.interiorImage
							: this.orderDetail.alsoCarCheck.interiorImage,
					scratchImage:
						type == 1
							? this.orderDetail.carInspection.scratchImage
							: this.orderDetail.alsoCarCheck.scratchImage,
					videoUrls:
						type == 1
							? this.orderDetail.carInspection.videoUrls
							: this.orderDetail.alsoCarCheck.videoUrls,
				};
				uni.navigateTo({
					url:
						"/order/shortOrder/checkCarPhoto?params=" + encodeURIComponent(JSON.stringify(params)),
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.remarkBox {
		background: #f2f7ff;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.remark {
			color: #333333;
			font-size: 28rpx;
		}

		.other {
			margin-top: 20rpx;
			color: #999999;
			font-size: 28rpx;
		}
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>
